<template>
  <view class="detail">
    <view class="detail-top">
      <view class="detail-btn">
        滑动查看全图
      </view>
      <view class="detail-count" v-if="showClock">
        倒计时:
        <view class="countdown-box">
          <count :interval="1000" :totalTime="60" :on-finish="onFinish" />
        </view>
        S
      </view>
    </view>

    <view class="detail-tt">
      {{ title }}
    </view>

    <view class="detail-img-container">
      <view class="detail-img-wrap">
        <scroll-view :scroll-x="true" :scroll-y="true" style="height: 800rpx;" class="detail-img-inn" id="imgWrap">
          <view class="warn-iconwrap">
            <view :class="['detail-error', `scene_${scene}`]" />
            <view v-for="item in sceneErrorIds" :key="item"  @click="clickItem(item)" :class="['error_id', `error_id${item}`]"
            >
              <view :class="['warn-icon', { show: findErrors.includes(item) }]"></view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>


    <navbar defaultTab="home" />

    <nut-popup key="cong" :style="{ background: 'transparent' }" pop-class="detail-pop" :close-on-click-overlay="false"
      v-model:visible="showFindDanger">
      <view class="detail-tip-wrap">
        <view class="detail-tip-tt"></view>
        <view class="detail-tip">
          <view class="detail-tip-txt">
            <view class="detail-cong">恭喜您找到隐患</view>
            <view class="detail-danger">隐患：{{ error }}</view>
            <view>该场景还剩 {{ sceneDangerMap[scene] - succCount  }} 个隐患</view>
          </view>
        </view>

        <view class="detail-tip-btn" @click="closeCong"></view>
      </view>
    </nut-popup>


    <nut-popup key="overtime" :style="{ background: 'transparent' }" pop-class="detail-pop"
      :close-on-click-overlay="false" v-model:visible="showOverTime">
      <view class="detail-tip-wrap">
        <view class="detail-tip-tt"></view>
        <view class="detail-tip">
          <view class="detail-tip-txt">
            <view class="detail-cong">您未能在规定时间内</view>
            <view class="detail-cong">排查全部隐患</view>
          </view>
        </view>

        <view class="detail-tip-btn" @click="closeOvertime"></view>
      </view>
    </nut-popup>

    <nut-popup key="succ" :style="{ background: 'transparent' }" pop-class="detail-pop" :close-on-click-overlay="false"
      v-model:visible="showSucc">
      <view class="detail-tip-wrap">
        <view class="detail-tip-tt"></view>
        <view class="detail-tip">
          <view class="detail-tip-txt">
            <view class="detail-cong">恭喜您完成隐患排查</view>
            <view class="detail-cong">获得消防徽章碎片</view>
            <view :class="['detail-suipian', 'suipian' + scene]"></view>
          </view>
        </view>

        <view class="detail-tip-btn" @click="closeSucc"></view>
      </view>
    </nut-popup>

    <nut-popup key="allOk" :style="{ background: 'transparent' }" pop-class="detail-pop" :close-on-click-overlay="false"
      v-model:visible="showAllOk">
      <view class="detail-tip-wrap">
        <view class="detail-tip-tt"></view>
        <view class="detail-tip">
          <view class="detail-tip-txt">
            <view class="detail-cong">恭喜您完成全部场景的隐患排查</view>
            <view class="detail-danger">集齐{{ sceneLen }}个碎片，合成消防徽章</view>
            <view class="detail-cong">获得抽奖机会，立即抽奖吧</view>
            <view :class="['detail-suipian', 'suipian' + scene]"></view>
          </view>
        </view>

        <view class="detail-tip-btn" @click="backMy"></view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup>
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { ref, toRefs, onMounted } from "vue";
import navbar from '../home/navbar'
import count from './count.vue'
import { Dialog } from '@nutui/nutui-taro';
import { getDate } from '../../utils'
import { sceneStateKey, prizeStateKey } from '../../constants'


const sceneNameMap = {
  1: '高层住宅小区',
  2: '服装工厂',
  3: '小超市',
}

const dangerMap = {
  1: [
    {
      tip: '电动车室内停放、飞线充电',
      id: '1',
    },
    {
      tip: '遮挡消火栓',
      id: '2',
    },
    {
      tip: '常闭式防火门未保持常闭',
      id: '3',
    }
  ],
  2: [
    {
      tip: '服装加工车间等公共场所内抽烟',
      id: '5',
    },
    {
      tip: '灭火器失效',
      id: '6',
    },
    {
      tip: '疏散通道锁闭',
      id: '7',
    },
    {
      tip: '门窗上设置影响逃生的不锈钢防盗窗等障碍物',
      id: '8',
    }
  ],
  3: [
    {
      tip: '社会面小场所内使用明火灶具',
      id: '9',
    },
    {
      tip: '电器电线私搭乱接',
      id: '10',
    },
    {
      tip: '遮挡室内消火栓',
      id: '11',
    },
  ]
}
const sceneDangerMap = {
  1: dangerMap[1].length,
  2: dangerMap[2].length,
  3: dangerMap[3].length,
}

const sceneLen = 3

const dateNow = getDate()

const title = ref('')
const showFindDanger = ref(false)
const showOverTime = ref(false)
const showSucc = ref(false)
const showAllOk = ref(false)
const showClock = ref(false)
const succCount = ref(0)
const succScenes = ref([])
const findErrors = ref([])
const sceneErrorIds = ref([])
const error = ref('')
const scene = ref(0)

onMounted(async () => {
  const urlSceneId = getCurrentInstance().router.params.scene;
  if (urlSceneId) {
    scene.value = parseInt(urlSceneId);
    title.value = sceneNameMap[scene.value]
    sceneErrorIds.value = dangerMap[scene.value]?.map(t => t.id)
  }
  const st = await Taro.getStorageSync(`${sceneStateKey}_${dateNow}`)
  succScenes.value = st?.succScenes ?? []
  findErrors.value = st?.findErrors ?? []
  succCount.value = findErrors.value.filter(i => sceneErrorIds.value.includes(i)).length

  if (succScenes.value.includes(scene.value)) {
    showClock.value = false
  } else {
    showClock.value = true
  }
})

async function getStorage() {
  const old = Taro.getStorageSync(`${sceneStateKey}_${dateNow}`)
  return old ?? {}
}

async function onFinish() {
  showOverTime.value = true
}

function closeOvertime() {
  showOverTime.value = false
  Taro.navigateTo({
    url: `/pages/home/index`,
  });
}

async function clickItem(id) {
  const sceneDanger = dangerMap[scene.value]
  const selected = sceneDanger.find(t => t.id == id)
  if (selected) {
      showFindDanger.value = true
      error.value = selected.tip
      const oS = await Taro.getStorageSync(`${sceneStateKey}_${dateNow}`)
      const oerros = oS.findErrors ?? []
      if (!oerros.includes(selected.id)) {
        succCount.value = succCount.value + 1
      }
      const errs = Array.from(new Set([...(oerros), selected.id]))
      findErrors.value = errs
      const newStorage = {
        findErrors: errs
      }
      if (succCount.value == sceneDangerMap[scene.value]) {
        const scenes = Array.from(new Set([...(oS.succScenes ?? []), scene.value]))
        succScenes.value = scenes
        newStorage.succScenes = scenes
      }
      if (succScenes.value.length === sceneLen) {
        await Taro.setStorageSync(`${prizeStateKey}_${dateNow}`, {
          prizeOpp: 1
        })
      }
      await Taro.setStorageSync(`${sceneStateKey}_${dateNow}`, {
        ...(oS ?? {}),
        ...newStorage
      })
    }
}

async function closeCong(params) {
  showFindDanger.value = false
  // 该场景结束
  if (showClock.value && succCount.value == sceneDangerMap[scene.value]) {
    showSucc.value = true
    showClock.value = false
  }
}

async function closeSucc() {
  // 所有场景结束
  if (succScenes.value?.length === sceneLen) {
    showAllOk.value = true
  } else {
    backHome()
  }
}

function backHome() {
  Taro.redirectTo({
    url: `/pages/home/index`,
  });
}

function backMy() {
  Taro.redirectTo({
    url: `/pages/my/index`,
  });
}

</script>

<style lang="css">
.detail {
  padding-top: 50px;
  padding-bottom: 200px;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/award_img_bg.jpeg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
  margin-bottom: 10px;
}

.detail-count {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.detail-danger {
  color: #ff0000b0;
  font-size: 16px;
}

.detail-btn {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ff0000b0;
  border-radius: 20px;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.7);
}

.detail-btn::before {
  content: '';
  display: inline-block;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/active_img_tip.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 20px;
  height: 20px;
}

.detail-img-container {
  padding: 0 10px;
}

.detail-img-wrap {
  border: 1px solid red;
  height: 400px;
  background: #fff;
  overflow: hidden;
}

.detail-img-inn {
  height: 400px;
  overflow: auto;
}


.detail-img-inn img {
  width: 1754px;
  height: 1240px;
}

.detail-tt {
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/active_img_name.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  margin-bottom: 10px;
  color: #fff;
}

.detail-tip-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: transparent
}

.detail-tip {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/rule_img_smallbg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
  width: 380px;
  height: 370px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center
}

.detail-tip-btn {
  width: 174px;
  height: 55px;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/dialog_img_btn2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}

.detail-tip-tt {
  width: 142px;
  height: 45px;
  position: relative;
  top: 30px;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/dialog_img_title1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}

.countdown-box {
  display: inline-block;
  background: #fff;
  color: #fa975a;
  border-radius: 5px;
  padding: 0 5px;
  margin-right: 2px;
}

.detail-suipian {
  width: 88px;
  height: 93px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}
.detail-suipian.suipian2 {
  transform: rotate(90deg);
}
.suipian1 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/main_img_suipian1.png");
}

.suipian2 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/main_img_suipian2.png");
}

.suipian3 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/main_img_suipian3.png");
}


.detail-tip-txt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 68%;
}

.warn-iconwrap {
  width: fit-content;
  position: relative;
}

.warn-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 99;
  line-height: 60px;
  box-sizing: border-box;
  pointer-events: none;
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/active_img_warn.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  display: none;
}
.warn-icon.show {
  display: block;
}

.detail-error {
  width: 1083px;
  height: 640px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.detail-error.scene_1 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_1.jpg");
}

.detail-error.scene_2 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_2.jpg");
}

.detail-error.scene_3 {
  background-image: url("https://7869-xiaofang-2g1dlrqbc66e0f24-1331027538.tcb.qcloud.la/scene_3.jpg");
}

.error_id {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center
}

.error_id1 {
  left: 752px;
  top: 302px;
  width: 307px;
  height: 192px;
}

.error_id2 {
  left: 339px;
  top: 214px;
  width: 204px;
  height: 318px;
}

.error_id3 {
  left: 67px;
  top: 125px;
  width: 238px;
  height: 360px;
}

.error_id5 {
  left: 353px;
  top: 233px;
  width: 168px;
  height: 382px;
}

.error_id6 {
  left: 813px;
  top: 358px;
  width: 40px;
  height: 103px;
}

.error_id7 {
  left: 868px;
  top: 130px;
  width: 192px;
  height: 307px;
}

.error_id8 {
  left: 126px;
  top: 51px;
  width: 255px;
  height: 258px;
}
.error_id9 {
  left: 10px;
  top: 150px;
  width: 155px;
  height: 220px;
}

.error_id10 {
  left: 165px;
  top: 10px;
  width: 267px;
  height: 410px;
}

.error_id11 {
  left: 433px;
  top: 155px;
  width: 160px;
  height: 186px;
}
</style>
